<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记帐本首页</title>
    <link rel="stylesheet" href="../plugins/bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <script src="../plugins/jquery/jquery-3.5.1.min.js"></script>
    <!-- 注意事项：如果使用的bootstrap是5.0以下，则jquery.js的文件一定要放在bootstrap.min.js的前面 -->
    <script src="../plugins/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>


</head>
<body>
<div id="app">

    <div class="container">
        <div class="row my_div_style" style="height: 150px;width:100%;">
            <div class="col-4 my_div_style">
                2022年
            </div>
            <div class="col-4 my_div_style">
                收入6958元
            </div>
            <div class="col-4 my_div_style">
                支出 19852元
            </div>
        </div>
        <div class="row" style="margin-top: 25px" v-for="item in list">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <span class="float-left">
                            <!--在这里需要动态展示一个图标-->
                            <img v-if="item.accountType === 1" src="../image/shouru.png" style="height: 35px">
                            <img v-if="item.accountType === 2" src="../image/zhichu2.png" style="height: 35px">
                            {{item.accountDesc}}
                        </span>
                        <span class="float-right">{{item.accountNum}} 元</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<view class="go-home">
    <img src="../image/add.png" style="width: 100px;height: 100px;"/>
</view>
</body>
<script>
    new Vue({
        el:"#app",//xxx与第3步中定义的id的值保持一致
        data:{//用来定义变量的
            list:[]
        },
        methods:{//用来定义自定义界面事件的

            getInfoList(){
                axios.get("/list").then(res=>{//向自己的后台发送请求
                    //通过日志输出语句，可以用来在浏览器的F12中，【控制台】查看变量的值
                    // console.log(JSON.stringify(res));//如果想看返回的内容，以字符串形式展示，借助JSON工具
                    this.list = res.data;
                })
            }

        },
        //在vue中，如果需要页面一打开，就能自动发送一个请求，则可以在如下方法中进行执行
        created(){
            this.getInfoList();
        }

    })

</script>

<style>
    .my_div_style {
        font-size: xx-large;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
    }

    .go-home {
        position: fixed;
        bottom: 5%;
        right: 1%;
        z-index: 888;
        border-radius: 40px;
        opacity: 0.9;
    }
</style>
</html>